<template>
  <div class="flex flex-col h-screen">
    <!-- 现代化头部设计 -->
    <UHeader>
      <template #title>
        <NuxtLink to="/">123
          <UIcon
            name="i-heroicons-sparkles"
            class="h-6 w-auto text-white"
          />
        </NuxtLink>
      </template>
      <template #body>
        <UNavigationMenu
          :items="items"
          orientation="vertical"
          class="-mx-2.5"
        />
      </template>
    </UHeader>

    <!-- 主内容区域，固定高度并支持滚动 -->
    <UMain>
      <slot />
    </UMain>
    <UFooter>
      <!-- 底部导航栏 -->
      <TabBar
        v-model="activeTabPath"
        :items="appConfig.tabBar.items"
        @navigate="handleNavigate"
      />
    </UFooter>
  </div>
</template>

<script setup lang="ts">
import { useAppConfig } from '#imports'
import { useActiveTab } from '~/composables/useActiveTab'
import TabBar from '~/components/layout/TabBar.vue'
import type { NavigationMenuItem } from '@nuxt/ui'

const appConfig = useAppConfig()
const { activeTabPath } = useActiveTab()

const handleNavigate = (path: string) => {
  navigateTo(path)
}

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: '个人中心',
    to: '/profile',
    active: route.path.startsWith('/profile')
  },
  {
    label: 'Figma',
    to: 'https://go.nuxt.com/figma-ui',
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

<style scoped>
/* 添加滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}
</style>
